<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"></meta>
		<meta content="width=device-width,initial-scale=1" name="viewport">
		<title>双向绑定</title>
	</head>
	<body>
		<button onclick="printBindData()">打印绑定后的值</button>
        <input id="inputid" oninput="useState(this)"><button onclick="setBindData('你好')">赋新的值</button>
        <div id="showdiv"></div>
	</body>
</html>

<script>



let obj = {
    name:"hello"
}
;(function(){
    document.getElementById("showdiv").innerText = obj.name
})()
console.log(obj)

let obj_bind = mybind(obj)

console.log(obj_bind)

let org = {
    name
}

function mybind(target){
    return new Proxy(target,{
        get(obj,prop){
            // console.log(obj,prop)
            return obj[prop]
        },
        set(obj, prop, value){
            console.log("this is set method")
            // console.log(obj,prop,value)
            obj[prop] = value
            document.getElementById("showdiv").innerText = obj[prop] 
        },
    })
}

function printBindData(){
    console.log(obj_bind.name)
}

function setBindData(newval){
    obj_bind.name = newval
}

function useState(obj){
    // console.log(obj.value)
    setBindData(obj.value)
}

</script>